<template>
  <div class="table">
    <!-- 搜索栏和table表格封装 -->
    <el-card class="page_wrapper_right" shadow="never">
      <div class="table_header">
        <el-button :icon="Delete" size="small" type="primary" @click="checkDelete"> 批量删除 </el-button>
        <slot name="header">

        </slot>
        <el-button
        v-if="!props.addItem"
          size="small"
          type="primary"
          :icon="Plus"
          style="float: right"
          @click="addUser"
          
        >
          新增
        </el-button>
      </div>

      <div class="table_wrapper">
        <el-table
          :data="props.tableData"
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <slot></slot>
          <el-table-column  label="状态" width="80">
            <template #default="scope">
                <el-switch
                  v-model="scope.row.operate"
                  v-if="scope.row.operate !==undefined"
                  class="ml-2"
                  style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #ff4949;
                  "
                />
            </template>
            
            </el-table-column>;
          <el-table-column
            prop="operate"
            label="操作"
            width="200"
            fixed="right"
          >
            <template #default="scope">
              <div class="operate-item">
              
                <el-button
                  size="small"
                  :icon="Edit"
                  link
                  @click="handleEdit(scope.row, scope.$index)"
                >修改</el-button>
                <el-popconfirm
                  title="确定删除？"
                  @confirm="handleDelete(scope.row, scope.$index)"
                  @cancel="cancelEvent"
                >
                  <template #reference>
                    <el-button
                      size="small"
                      :icon="Delete"
                      type="danger"
                      link
                      style="margin-left: 0"
                    >删除</el-button>
                  </template>
                </el-popconfirm>

                <el-dropdown
                  v-if="props.setOption"
                  @command="moreOperate(scope.row, scope.$index,$event)"
                  trigger="click"
                >
                  <el-button size="small">
                    更多
                    <el-icon><ArrowDownBold /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu size="small">
                      <el-dropdown-item
                        v-for="item in setOption"
                        :key="item.value"
                        :command="item.value"
                      >
                        {{ item.label }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
          <template #empty>
            <div class="empty">
              <el-icon size="50px"><MessageBox /></el-icon>
              <span>内容为空</span>
            </div>
          </template>
        </el-table>
      </div>

       <!-- 分页组件插槽 -->
    <slot name="pagination"></slot>
    </el-card>
    <!-- 弹出层组件 -->
    <Dialog
      :isVisible="isVisible"
      :title="title"
      @submit="submit"
      @close="cancel"
    >
      <slot name="dialog"></slot>
    </Dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, toRefs, computed, watch } from "vue";
import {
  Plus,
  Edit,
  ArrowDownBold,
  Delete,
  MessageBox,
} from "@element-plus/icons-vue";

import TableSelect from "@/components/TableSelect.vue";
import Dialog from "@/components/Dialog.vue";

const props = defineProps({
  tableData: Array,
  setOption: Array,
  title: String,
  addItem:{
    type:Boolean,
    define:true
  },
  headerTitle:String,
});
const value1 = ref(0);

const emit = defineEmits(["edit", "add", "handleDelete","editTableData","addTableData","moreOperate","checkDelete"]);


const multipleSelection = ref([]);
onMounted(() => {

});
const currentIndex = ref("");
const isVisible = ref(false);
const isEdit = ref(false);
// 修改获添加提交数据
const submit = async() => {
  isVisible.value = false;
  let message = "";
  if (isEdit.value) {
    // tableData.value[currentIndex.value] = form.value;
    // 父元素调用对应的修改api
   await emit("editTableData",currentIndex.value)
    message = "修改成功";
  } else {
    await emit("addTableData")
    // tableData.value.push(form.value);
    // 父元素调用对应的添加api
    message = "添加成功";
  }
  ElMessage({
    message: message,
    type: "success",
  });
};

// 点击添加按钮
const addUser = () => {
  emit("add");
  isEdit.value = false;
  isVisible.value = true;
};

// 取消添加
const cancel = () => {
  isVisible.value = false;
};

// 修改某一项
const handleEdit = (scope, index) => {
  emit("edit",scope,index);
  isEdit.value = true;
  isVisible.value = true;
  currentIndex.value = index;
};

// 删除某一项
const handleDelete = (scope, index) => {
  // tableData.value.splice(index, 1);
  // 调用删除接口
  emit("handleDelete",scope,index)
  ElMessage({
    message: "删除成功",
    type: "success",
  });
};
const handleNodeClick = () => {
  console.log(111);
};

// 操作栏
const moreOperate = (row,index,command) => {

emit("moreOperate", row,index,command);
};

// 删除某一项时，选择取消
const cancelEvent = () => {
  ElMessage({
    message: "已取消",
    type: "success",
  });
};

// 筛选提交后的操作
const submitSelect = (selectVal, inputVal) => {
  
  emit('handleSearch',selectVal, inputVal)
};
// 筛选重置后的操作
const resetSelect = () => {
  // 重新请求一次tableData数据
  emit('handleReset','','')
};


// 多选操作
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

// 批量删除
const checkDelete = () => {
  const data = multipleSelection.value;
  if (data.length > 0) {
    // 二次确认删除，防止误删
     ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(async () => {
      await emit("checkDelete",data)
    ElMessage.success(`删除成功`);
    multipleSelection.value = [];
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
   
  } else {
    ElMessage.error(`最少选中一项进行操作`);
  }
};


// watch(() => props.tableData,(val) => {
//   tableData.value = val
// },{immediate:true})
</script>

<style lang="scss" scoped>
.empty {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.table {
  &:deep(.el-card) {
    border: none;
  }
  .page_wrapper_right {
  // background: #fff;
  .table_header {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }
  .table_wrapper {
    margin-bottom: 20px;
  }
}
}
.operate-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

</style>